<style lang="scss">
.ZDragRichText {
  color: #fff;
  position: relative;
  .ql-toolbar {
    background-color: #fff;
  }
  .qus-editor {
    gap: 0;
  }
  .qus-editor .cus-div {
    border-color: transparent;
    padding: 0;
  }
  &:not(.edited) {
    .ql-toolbar {
      height: 0;
      padding: 0;
      overflow: hidden;
      border-bottom: none;
    }
  }
  &__edit {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 33;
    transform: translate(0, -120%);
  }
}
</style>

<template>
  <div class="ZDragRichText"
       v-click-outside="onClickOutSide"
       :class="{'edited': edited}">
    <i class="el-icon-edit ZDragRichText__edit" @click="edited = !edited"></i>
    <z-quill-editor
        @input="onEditorInput"
        @selection-change="onSelectionChange"></z-quill-editor>
  </div>
</template>

<script>
export default {
  name: 'ZDragRichText',
  data() {
    return {
      focused: false,
      edited: false
    }
  },
  methods: {
    onSelectionChange(range) {
      if (range) {
        if (range.start === range.end) {
          // console.log('User cursor is on', range.start);
          this.focused = true
          this.$parent.setItemData('draggable', false)
        } else {
          // var text = editor.getText(range.start, range.end);
          // console.log('User has highlighted', text);
        }
      } else {
        // console.log('Cursor not in the editor');
        this.focused = false
        this.$parent.setItemData('draggable', true)
      }
    },
    onClickOutSide() {
      this.edited = false
    },
    onEditorInput(e) {
      this.$parent.setItemData('dataset', e)
    }
  }
}
</script>
